<!DOCTYPE html>
<html>
<head>
</head>
<style>
	body{
		line-height: 1.2;
		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial;
	}
	.dark-mode{
		    -webkit-filter: invert(100%);
		    filter: invert(100%);
		}

	#content{
		display: none;
	}



	.spinner {
		  margin: 10px auto;
		  width: 50px;
		  height: 30px;
		  text-align: center;
		  font-size: 10px;
		}

		.spinner > div {
		  background-color: #333;
		  height: 100%;
		  width: 6px;
		  display: inline-block;
		  
		  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
		  animation: stretchdelay 1.2s infinite ease-in-out;
		}
		.spinner .rect2 {
		  -webkit-animation-delay: -1.1s;
		  animation-delay: -1.1s;
		}

		.spinner .rect3 {
		  -webkit-animation-delay: -1.0s;
		  animation-delay: -1.0s;
		}

		.spinner .rect4 {
		  -webkit-animation-delay: -0.9s;
		  animation-delay: -0.9s;
		}

		.spinner .rect5 {
		  -webkit-animation-delay: -0.8s;
		  animation-delay: -0.8s;
		}

		@-webkit-keyframes stretchdelay {
		  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
		  20% { -webkit-transform: scaleY(1.0) }
		}

		@keyframes stretchdelay {
		  0%, 40%, 100% { 
		    transform: scaleY(0.4);
		    -webkit-transform: scaleY(0.4);
		  }  20% { 
		    transform: scaleY(1.0);
		    -webkit-transform: scaleY(1.0);
		  }
		}
</style>
<body class="light-mode">
<div id="loading">
	<div class="spinner">
		<div class="rect1"></div>
		<div class="rect2"></div>
		<div class="rect3"></div>
		<div class="rect4"></div>
		<div class="rect5"></div>
	</div>
</div>
<div id="content">
	<div>
		<p>
			Local IP: #{local-ip}<br/>
		</p>
		<p>
			External IP: <span id="externalipPlaceholder"></span><br/>
		</p>
		<p>
			IP Location: <span id="iplocationPlaceholder"></span><br/>
		</p>
		<p>
			Useragent: <span id="useragentPlaceholder"></span><br/>
		</p>
		<p>
			Browser Language: <span id="browserlanguagePlaceholder"></span><br/>
		</p>
		<p>
			Cookies Enabled: <span id="cookieenabledPlaceholder"></span><br/>
		</p>
	</div>
</div>

<script>
	function getObjectFromResponse(response){
		var ret = {};
		if(response){
			var lines = response.split('\n');
			for (var i = lines.length - 1; i >= 0; i--) {
				if(lines[i].indexOf("Country") > -1){
					ret.country = lines[i].split(':')[1];
				}else if(lines[i].indexOf("City") > -1){
					ret.city = lines[i].split(':')[1];
				}else if(lines[i].indexOf("IP") > -1){
					ret.ipaddress = lines[i].split(':')[1];
				}
			};
		}
		return ret;
	};

	function sendRequest(url, callback){
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.onreadystatechange = function() {
		    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
		        callback(xmlhttp.responseText);
		}
		xmlhttp.open("GET", url, true);
		xmlhttp.send();
	}

	sendRequest("http://api.hostip.info/get_html.php", function(response){
		var responseObject = getObjectFromResponse(response);
		document.querySelector('#content').style.display = "block";
		document.querySelector('#loading').style.display = "none";
		document.querySelector('#externalipPlaceholder').innerHTML = responseObject.ipaddress;
		document.querySelector('#iplocationPlaceholder').innerHTML = responseObject.city + ', ' + responseObject.country;
		document.querySelector('#useragentPlaceholder').innerHTML = navigator.userAgent;
		document.querySelector('#browserlanguagePlaceholder').innerHTML = navigator.language;
		document.querySelector('#cookieenabledPlaceholder').innerHTML = navigator.cookieEnabled;
	});
</script>
</body>
</html>